<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=320, user-scalable=no, target-densitydpi=device-dpi"> 
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/style7.css">
</head>
<body>
	<div id="box">
		<span id="time_title">
			剩余时间:XX.XX  完成:XX
		</span>
		<div id="game_content">
			<div>
				
			</div>
			<div>
				根据上面文字的颜色，从下面文字中选择正确的字，选择正确自动开始！
			</div>
		</div>
		<div id="game_button">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
</body>
	<script type="text/javascript">

	// 源数据数组
	var game_content_arr = ['黑','红','黄','绿','蓝'];
	var game_content_arrColor = ['black','red','yellow','green','blue'];

	var time_title = document.getElementById('time_title');
	var game_text = document.getElementById('game_content').getElementsByTagName('div')[0];
	var click_texts = document.getElementById('game_button').getElementsByTagName('div');

	// 分数
	var source = 0;

	initGameContent();
	initBottomButton();




	// 初始化计时器
	function initInterVal(){
		var time_out = 20;
			
		var timer = setInterval(function(){
			time_out -= 0.01;
			time_title.innerHTML = '剩余时间: '+time_out.toFixed(2)+'    完成:' + source;
			if (time_out.toFixed(2) == 0) {
				clearInterval(timer);
				time_title.innerHTML = '剩余时间:XX.XX   完成:XX';
				setTimeout(function(){
					alert('得分：' + source + '分');
					source = 0;
				},100)
			}
		},10);
	}

	// 获取脚标
	function getIndex(num){
		var index = Math.round(Math.random()*num);
		return index;
	}

	// 生成文字
	function initText(who,num,type){
		var t_index = getIndex(num);
		var c_index = getIndex(num);
		var t = game_content_arr[t_index];
		var c = game_content_arrColor[c_index];
		who.innerHTML = t;
		who.style.color = c;
		if (type != 'content') {
			game_content_arr.splice(t_index,1);
			game_content_arrColor.splice(c_index,1);
		}
		if (game_content_arr.length == 0) {
			resetInitArray();
		}
	}

	// 生成游戏文字
	function initGameContent(){
		initText(game_text,4,'content');
	}

	// 生成底部button
	function initBottomButton(){
		for (var i = 0; i < click_texts.length; i++) {
			initText(click_texts[i],click_texts.length - 1 - i,'normal');
			click_texts[i].onclick = function(){
				gameClick(this);
			}
		}
	}

	// 还原源数组数据
	function resetInitArray(){
		game_content_arr = ['黑','红','黄','绿','蓝'];
		game_content_arrColor = ['black','red','yellow','green','blue'];
	}

    // 得分
    function score(who){
    	var index;
    	for (var i = 0; i < game_content_arrColor.length; i++) {
    		if (game_content_arrColor[i] == game_text.style.color) {
    			index = i;
    			break;
    		}
    	}
    	var game_content_text = game_content_arr[index];
    	if (game_content_text == who.innerHTML) {
    		// 正确！加一分！
    		if (source == 0) {
    			initInterVal();
    		}
    		source++;

    		initGameContent();
			initBottomButton();
    	}
    }


	function gameClick(who){
		score(who);
	}


	</script>
</html>